<template>
	<view class="farm-money-vison wf-box">

		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="../../static/img/chat-09.png"></image>
				</view>
				<view class="title">农场赚币</view>
				<view></view>
			</view>
		</view>

		<!-- <image class="farm-bg" src="../../static/img/farm-bg.png" mode="widthFix"></image> -->

		<view class="main" :style="{ paddingTop: navBarHeight }">
			<view class="participant-ul">
				<view class="participant-li" v-for="itme in participantList">
					<view class="participant-main">
						<view class="participant-left">
							<view class="name-view">
								<view class="name">
									{{itme.name}}
								</view>
								<view class="text">
									{{itme.text}}
								</view>
							</view>
							<view class="fraction-view">
								<view class="fractionText">
									{{itme.fractionText}}
								</view>
								<view class="fraction">
									{{itme.fraction}}
								</view>
							</view>
						</view>
						<view class="farm-ionc-view">
							<image class="farm-icon" :style="itme.iconWight" :src="itme.icon" mode="widthFix"></image>
						</view>
					</view>
					<button class="participant-btn">立即参与</button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				participantList: [{
						name: 'KT活期宝',
						text: '随时赎回，享受更高流动性',
						fractionText: '参考APY',
						fraction: '5~90%',
						icon: '../../static/img/farm-ionc1.png',
						iconWight: 'width: 260rpx;'
					},
					{
						name: '定期KT锁定',
						text: '按照1:1.8比例收取KT邀请好友加速发放奖励',
						fractionText: '预期奖励',
						fraction: '180%',
						icon: '../../static/img/farm-ionc2.png',
						iconWight: 'width: 236rpx;'
					}
				]
			}
		},
		mixins: [navBarMixin],
		methods: {
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		background: url('../../static/img/farm-bg.png') no-repeat;
		background-size: 100% 662rpx;

		.back {
			image {
				width: 20rpx;
				height: 37rpx;
			}
		}

		.head {
			position: fixed;
			z-index: 1;
			width: 100%;
			background: transparent;

			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
		
		.main {
			margin-top: 126rpx;
			padding: 0 30rpx;
		}
	}

	.farm-bg {
		width: 100%;
		position: absolute;

	}

	.participant-ul {
		// width: 100%;
		// position: absolute;
		// z-index: 2;
		// padding-top: 100rpx;

		.participant-li {
			// width: 92%;
			// margin-left: 4%;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 30rpx 60rpx 30rpx 30rpx;
			margin: 0 auto 30rpx;

			.participant-main {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.participant-left {
					.name-view {
						.name {
							font-size: 34rpx;
							color: #333333;
						}

						.text {
							font-size: 28rpx;
							margin: 24rpx 0 72rpx;
							color: #666666;
						}
					}

					.fraction-view {
						.fractionText {
							font-size: 24rpx;
							color: #666666;
							margin-bottom: 12rpx;
						}

						.fraction {
							font-size: 34rpx;
							color: #3F93FF;
						}
					}
				}

				.farm-ionc-view {
					width: 260rpx;

					.farm-icon {}
				}
			}

			.participant-btn {
				width: 84%;
				margin-left: 10%;
				height: 83rpx;
				background: #3F93FF;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				color: #fff;
				margin-top: 50rpx;
			}
		}
	}
</style>